
<div class="fullscreen" style="background: black">
<video class="fullscreen" id="videoplayer" src="{{src}}" controls></video>
</div>

<div id="osd" class="hide">
	<div class="well">
			DVD
			<a class="btn" id="playpause" tabindex="0" onclick="playpause()">❚❚</a>
			<a class="btn" id="rewind" tabindex="1" onclick="rewind()">◀◀</a>
			<a class="btn" id="fastforward" tabindex="2" onclick="fastforward()">▶▶</a>
		</div>
	</div>
</div>

<script type="text/javascript">
function showOsd() {
	$("#osd").removeClass("hide");
	$("#osd a").first().focus();
}

function hideOsd() {
	$("#osd").addClass("hide");
}

// keys
keyevents[keys.ok] = showOsd;
keyevents[keys.back] = hideOsd;

var video = $("#videoplayer")[0];
// start playing immediately
//video.play();
function playpause() {
	if(video.paused) {
		video.play();
		$("a#playpause").text("❚❚");	
	}
	else {
		video.pause();
		$("a#playpause").text("▶");
	}
}

function alive() {
	$.ajax({
			url: "dvdalive/{{id}}", 
			async: false, 
			success: function(data){}
		   });
}

setInterval(alive, 500);
setTimeout(video.play, 3000);

</script>
